<template>
	<view class="main u-font-26">
		<view id="head-box" class="head-box">
			<!-- <u-notice-bar text="您可以批量管理多个场地的广告图，也可逐个场地管理广告图。当前功能仅适合《超级兑币机》类型的有屏兑币机" bgColor="rgb(217, 226, 255)" color="rgb(69, 111, 255)" ></u-notice-bar> -->
			<view class="search-box u-p-t-28 u-p-b-8">
				<u-search v-model="params.keyword" :show-action="false" placeholder="请输入场地名称" class="input" clearabled
						  bgColor="rgb(247, 248, 247)" :animation="true"  margin="20rpx" searchIconShow="true" showAction="true"
						  @clickIcon="findMerchantBannerByUserId()" @search="findMerchantBannerByUserId()" @custom="findMerchantBannerByUserId()"
						  @clear="findMerchantBannerByUserId()"/>
				<text class="search-box-r u-p-30" @click="batchUploadClick(false)" v-if="batchUpload">取消批量</text>
				<text class="search-box-r u-p-30" @click="batchUploadClick(true)" v-else>批量上传</text>
			</view>
		</view>

		<scroll-view :style="{ height: height + 'px' }" scroll-y="true" @scrolltolower="reachBottom">
			<view class="store-list u-m-t-20 u-m-b-20">
				<view class="store-item u-font-28 u-row-between u-p-l-26 u-p-r-26 u-flex-row" v-for="(item, index) of merchantStoreList" :key="index"
					  @click="nav('/pages-brand/advertising-set/advertising-set?merchantStoreId=' + item.id + '&type=1')">
					<view class="store-item-l u-flex-row">
						<view class="u-m-r-19" v-if="batchUpload">
							<u-checkbox-group @change="merchantStoreCheckboxChange($event, item.id)">
								<u-checkbox :checked="item.checked" shape="circle" activeColor="#6072FF" :name="item.id"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view>{{item.storeName}}</view>
					</view>
					<view class="store-item-r u-flex-row">
						<text v-if="item.merchantBannersList.length > 0">已设置</text>
						<text v-else class="store-item-r-t">未设置</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="16"></u-icon>
					</view>
				</view>
				<view class="u-p-b-50" v-if="merchantStoreList.length == 0">
					<u-empty
						text="暂无场地"
						mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"
					/>
				</view>
			</view>
		</scroll-view>

		<view id="footer" class="footer u-flex-row" v-if="batchUpload">
			<u-checkbox-group @change="checkAllChange($event)">
				<u-checkbox :checked="checkedAll" shape="circle" label="全选" activeColor="#6072FF"></u-checkbox>
			</u-checkbox-group>

			<u-button text="下一步" :customStyle="nextStepBtnCustomStyle" @click="navAll()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				nextStepBtnCustomStyle: {
					width: '488rpx',
					height: '78rpx',
					background: 'rgb(69, 111, 255)',
					borderRadius: '120px',
					color: '#fff',
				},

				batchUpload: false,
				merchantStoreList: [],
				checkedMerchantStoreIdArray: [],
				checkedAll: false,
				params: {
					keyword: '',
				}
			}
		},
		onReady(){
			this.getPomHeight()
		},
		onShow(){
			this.findMerchantBannerByUserId()
		},
		onPullDownRefresh() {
			this.findMerchantBannerByUserId();
		},
		methods: {

			checkAllChange(e){
				this.checkedAll = e.length > 0 ? true : false;
				this.checkedMerchantStoreIdArray = [];

				if (!this.checkedAll){
					this.merchantStoreList.forEach(item => {
						item.checked = false;
					})
					return
				}

				this.merchantStoreList.forEach(item => {
					item.checked = true;
					this.checkedMerchantStoreIdArray.push(item.id)
				})
			},

			merchantStoreCheckboxChange(e, merchantStoreId){
				let index = null;
				for (let i = 0; i < this.checkedMerchantStoreIdArray.length; i++) {
					if (this.checkedMerchantStoreIdArray[i] == merchantStoreId){
						index = i;
						break
					}
				}

				// console.log("index：" + index)
				if (index == null && e.length > 0){
					this.checkedMerchantStoreIdArray.push(e[0])
					if (this.checkedMerchantStoreIdArray.length == this.merchantStoreList.length){
						this.checkedAll = true
					}
					// console.log(1111)
				} else if (index != null) {
					this.checkedAll = false;
					this.checkedMerchantStoreIdArray.splice(index, 1);
					// console.log(2222)
					// console.log(this.checkedMerchantStoreIdArray)
				}
			},

			navAll(){
				// console.log(this.checkedMerchantStoreIdArray)
				if (this.checkedMerchantStoreIdArray.length <= 1){
					this.$helpers.toast('批量操作至少选择2个场地');
					return
				}

				let boo = false;
				for (let i = 0; i < this.merchantStoreList.length; i++) {
					if (this.merchantStoreList[i].merchantBannersList.length > 0){
						boo = true;
						break;
					}
				}

				if (!boo){
					uni.navigateTo({
						url:'/pages-brand/advertising-set/advertising-set?merchantStoreIdList=' + JSON.stringify(this.checkedMerchantStoreIdArray) + '&type=2'
					})
				}

				var _that = this;
				uni.showModal({
					title: '批量设置新广告则会覆盖旧广告',
					cancelText: '取消',
					confirmText: '确认',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages-brand/advertising-set/advertising-set?merchantStoreIdList=' + JSON.stringify(_that.checkedMerchantStoreIdArray) + '&type=2'
							})
						}
					}
				});
			},

			nav(url){
				// console.log(this.batchUpload)
				if (this.batchUpload){
					return
				}

				uni.navigateTo({
					url:url
				})
			},

			findMerchantBannerByUserId() {
				this.$api('merchantBanner.findMerchantBannerByUserId', this.params).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0){
						this.checkedAll = false;
						this.batchUpload = false;
						this.merchantStoreList = [];
						this.checkedMerchantStoreIdArray = [];
						for (let i = 0; i < res.data.length; i++) {
							res.data[i]['checked'] = false;
							this.merchantStoreList.push(res.data[i])
						}
					} else {
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},

			batchUploadClick(bool){
				this.batchUpload = bool;
				this.$nextTick(() => {
					this.getPomHeight();
				});
			},

			reachBottom(){

			},

			//计算滚动条高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#head-box').boundingClientRect();
				query.select('#footer').boundingClientRect();
				query.exec(res => {
					this.height = wx.getSystemInfoSync().windowHeight;
					for (var i = 0; i < res.length; i++) {
						// console.log("res[i]：" + res[i])
						if (res[i]){
							this.height -= res[i].height;
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.main{
	.head-box{
		.search-box{
			background-color: #fff;
			display: flex;
			flex-direction: row;

			/deep/ .u-search{
				width: 550rpx;
			}

			.search-box-r{
				color: rgb(69, 111, 255);
			}
		}
	}

	.store-list{
		background-color: #fff;
		.store-item{
			height: 122rpx;

			.store-item-r{
				.store-item-r-t{
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}

	.footer{
		width: 100%;
		height: 166rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 20rpx 24rpx;
		border-top: 1rpx solid rgba(0,0,0, 0.1);

		/deep/ .u-checkbox{
			align-items: flex-start;
			padding-top: 30rpx;
		}
	}

}

</style>
